<template>
	<view class="tabbar_demo">
		<home v-if="current == 0"></home>
		<menus v-if="current == 1"></menus>
		<Lazyimg v-if="current == 3"></Lazyimg>
		<mine v-if="current == 4" ></mine>
		<u-tabbar :beforeSwitch="beforeSwitch" v-model="current" :show="show" :bg-color="bgColor" :border-top="borderTop"
		 :list="list" :mid-button="midButton" :inactive-color="inactiveColor" :activeColor="activeColor"></u-tabbar>
	</view>
</template>

<script>
	import home from '../index/index'
	import Lazyimg from '../Lazyimg/Lazyimg'
	
	import menus from '../menus/menus'
	import mine from '../my/my'
	export default {
		// 注册组件
		components: {
		  home,
		  menus,
		  Lazyimg,
		  mine
		},
		data() {
			return {
				current: 0,
				show: true,
				bgColor: '#ffffff',
				borderTop: true,
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '菜单',
						customIcon: false,
					},
					{
						iconPath: "/static/uview/example/min_button.png",
						selectedIconPath: "/static/uview/example/min_button_select.png",
						text: '发布',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '直播',
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
					},
				],
				midButton: true,
				inactiveColor: '#909399',
				activeColor: '#5098FF',
			}
		},
		created(){
		},
		methods: {
			showChange(index) {
				this.show = !index;
			},
			bgColorChange(index) {
				if(index == 0) {
					this.activeColor = '#5098FF';
					this.inactiveColor = '#909399';
				}
				if(index == 1) {
					this.activeColor = '#D0D0D0';
					this.inactiveColor = '#5A5A5A';
				}
				this.bgColor = ['#ffffff', '#1f1f1d'][index];
			},
			borderTopChange(index) {
				this.borderTop = !index;
			},
			badgeChange(index) {
				if (index == 1) {
					this.list[0].count = 0;
					this.list[4].count = 0;
				} else {
					this.list[0].count = 2;
					this.list[4].count = 23;
				}
			},
			minButtonChange(index) {
				this.midButton = !index;
			},
			beforeSwitch(index) {
			this.current=index
			},
		}
	}
</script>

<style scoped lang="scss">
	.tabbar_demo{
		background-color: #fff;
	}
	.u-demo-area {
		margin: 0 -40rpx;
	}
</style>
